<template>
  <div id="detailTj" class="goods_recommendation">
    <section class="mdetail_goodsdet_detail recommendation_logo block_logo">
      <span class="liner_detail"></span>
      <span class="detail_content">
        <i>
          <a class="goodsdet_detail">{{goodsRecommendation.goods_recommend_names}}</a>
        </i>
      </span>
      <span class="liner_detail"></span>
    </section>
    <section class="goods_recommendation_con">
      <van-list v-model="vanList.loading"
          :finished="vanList.finished"
          :error.sync="vanList.error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad">
        <ul class="clearfix">
          <li v-for="(item,index) in lists" :key="index">
            <!-- <a :href="item.link_item"> -->
              <!-- TODO 小程序使用openPage打开后台返回的链接 -->
            <a @click="openPage(item.link_item)">
              <div class="img_goods">
                <img :src="item.pic_url+'480x480'" alt v-if="item.is_compress==1" />
                <img :src="item.pic_url" alt v-else />
              </div>
              <div class="goods_txt">
                <div class="goods_title">{{item.title}}</div>
                <div class="goods_detail" :style="item.is_lists_sales == 0 ? 'margin-top: 5px':''">
                  <div class="price" v-html="scaleGoodsPriceFn(item.price)">
                  </div>
                  <div class="num" v-if="item.is_lists_sales == 1">
                    已售<span v-html="item.basic_sales*1 + item.real_sales*1"></span>{{item.unit}}
                  </div>
                </div>
              </div>
            </a>
            <div class="shop-cart" @click="handleOpenSkuDialog(item)" :style="item.is_lists_sales == 0 ? 'bottom: 10px':''"></div>
          </li>
        </ul>
      </van-list>
    </section>
    <sku-dialog :visible.sync="skuDialogVisible" :itemId="itemId"></sku-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import skuDialog from '../../components/skuDialog'
import { openPage } from '@/utils/utils'
import { goodsRecommendation } from '@/api/item/item'
import { scaleGoodsPrice } from '@/utils/index'
//图片的懒加载
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    loading:'https://img.wifenxiao.com/h5-wfx/images/public/imgLoading.png',
    error:'https://img.wifenxiao.com/h5-wfx/images/public/imgError.jpg'
})
export default Vue.extend({
  name: 'index',
  props: {
    goodsRecommendation: {
      type: Object,
      default: {}
    }
  },
  components: {
    skuDialog
  },
  data() {
    return {
      lists: [],
      itemId: 0,
      skuDialogVisible: false,
      goodsRecommendationData: {},
      // 购物车-为你推荐
      vanList: {
        loading: false,
        error: false,
        finished: false
      },
      p: 1
    }
  },
  created() {
    this.init()
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  mounted() {
    this.goodsRecommendationData = this.goodsRecommendation
  },
  watch: {
    goodsRecommendation: {
      immediate: true,    // 这句重要
      handler(val) {
        this.goodsRecommendationData = val
      }
    }
  },
  methods: {
    init() {
      this.p = 1
      this.vanList.finished = false
      this.lists = []
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    },
    onLoad() {
      const params = {
        item_id: this.goodsRecommendationData.itemId
      }
      if (this.goodsRecommendationData.type == 1) {
        params.class_id = this.goodsRecommendationData.classId
        params.item_ids = this.goodsRecommendationData.itemIds.join(',')
        params.type = this.goodsRecommendationData.type
        params.p = this.p
      }
      goodsRecommendation(params).then(res => {
        this.$loadingWrap.close()
        this.vanList.loading = false
        if (res.status === 1) {
          const resData = res.data.lists
          if (this.goodsRecommendationData.type == 1) {
            if (resData.length > 0) {
              this.lists.push(...resData)
              this.p++
            } else {
              this.vanList.finished = true
            }
          } else {
            this.vanList.finished = true
            this.vanList.loading = false
            this.vanList.error = false
            this.lists = resData
          }
          this.$emit('refreshFn')
        } else {
          this.vanList.finished = true
          this.vanList.loading = false
          this.vanList.error = false
        }
      })
    },
    openPage(link) {
      openPage(link)
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    handleOpenSkuDialog(data) {
      // 打开sku弹窗
      this.skuDialogVisible = true
      this.itemId = Number(data.item_id)
      if (this.goodsRecommendationData.type == 1) {
        this.goodsRecommendationData.itemIds.push(data.item_id)
      }
    }
  }
})
</script>
<style lang="scss">
.goods_recommendation_con{
  .price-scale {
    .num-font{
      font-size:32px;
    }
  }
}
</style>
<style  lang="scss">
@import "src/styles/mixin";
//详情等标题
.block_logo {
  font-size: 28px;
  text-align: center;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .detail_content {
    padding: 0 20px;
  }
  .liner_detail {
    width:35px;
    height:14px;
    background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/detail_left.png") no-repeat;
    background-size:100% 100%;
    &:last-child {
      background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/detail_right.png");
    }
  }
}
.goods_recommendation_con {
  a {
    color: #333;
  }
  ul {
    padding: 0 20px;
  }
  li {
    position:relative;
    overflow: hidden;
    float: left;
    width: 48.5%;
    margin-bottom: 16px;
    border-radius: 10px;
    background: #fff;
    &:nth-child(2n + 1) {
      margin-right: 3%;
    }
    .img_goods {
      overflow: hidden;
      position: relative;
      height: auto;
      padding-top:100%;
    }
    img {
      // width:100%;
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
    }
    .goods_txt {
      padding: 10px 20px 20px;
      .goods_title {
        @include lineClamp(28px,1.5,1);
      }
      .goods_detail {
        padding: 10px 0;
      }
      .num {
        margin-top:4px;
        color: #999;
      }
    }    
    .shop-cart{
      position:absolute;
      right:20px;
      bottom:30px;
      width:58px;
      height:58px;
      background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/detail-cart.png") no-repeat;
      background-size:100% 100%;
    }
  }
}
</style>
